<template>
  <BackTop :height="400" :bottom="50">
    <div
      class="backTop"
      @mouseenter="backTopEnter"
      @mouseout="backTopout"
      @click="backClick"
      :style="imgSty"
    ></div>
  </BackTop>
</template>
<script setup>
// 返回顶部
const imgSty = ref("background-position: 0px -20px");
const backTopEnter = () => {
  imgSty.value = "background-position: 0px -185px";
};
const backTopout = () => {
  imgSty.value = "background-position: 0px -20px";
};
const backClick = () => {
  imgSty.value = "background-position: 0px -385px";
};
</script>
<style  scoped>
.backTop {
  /* 返回顶部 */
  width: 95px;
  height: 150px;
  background: url(/other/backtotop.png) no-repeat;
  text-align: center;
}

@media (max-width: 800px) {
  .backTop {
    display: none;
  }
}
</style>